<!-- 危险源详情table -->
<template>
	<div>
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<v-table :data-list="scope123.data.formData[scope123.data.item.key]" v-bind="tableConfig">
				<template #footer v-if="!disabled">
					<div style="display: flex; justify-content: center">
						<el-button class="icon-e" icon="ele-CirclePlus" text type="primary" @click="addClick"> {{ $t('sf7FdRax4j7pC9Pcj42uG') }} </el-button>
						<!-- <el-button class="icon-e" icon="ele-Remove" text type="danger" @click="delClick"> 移 除 </el-button> -->
					</div>
				</template>

				<template #v_WorkExplain="scope">
					<el-input :disabled="disabled" v-model="scope.row[scope.prop.slotName]" :placeholder="$t('dUOjHba1HNlDsexyIzMw4')" />
				</template>
				<template #v_Shielding="scope">
					<el-select
						:disabled="disabled"
						style="width: 220px"
						v-model="scope.row[scope.prop.slotName]"
						multiple
						collapse-tags
						collapse-tags-tooltip
						filterable
						remote
						:placeholder="$t('ik_5kuOh10dpu3K0NrWfm')"
						remote-show-suffix
						@focus="remoteMethodShield"
						:loading="loading"
					>
						<el-option v-for="item in options" :key="item.n_Id" :label="item.v_ShieldingName" :value="item.v_ShieldingName" />
					</el-select>
				</template>
				<template #v_Advice_Shielding="scope">
					<el-select
						:disabled="disabled"
						style="width: 220px"
						v-model="scope.row[scope.prop.slotName]"
						multiple
						collapse-tags
						collapse-tags-tooltip
						filterable
						remote
						:placeholder="$t('otgb38TexxjGc1fF15f3')"
						remote-show-suffix
						@focus="remoteMethodAdvice"
						:loading="loading"
					>
						<el-option v-for="item in options" :key="item.n_Id" :label="item.v_ShieldingName" :value="item.v_ShieldingName" />
					</el-select>
				</template>
				<template #v_Control_Measures="scope">
					<el-input :disabled="disabled" :precision="0" v-model="scope.row[scope.prop.slotName]" />
				</template>
				<template #v_Control_Level="scope">
					<el-select :disabled="disabled" style="width: 110px" v-model="scope.row[scope.prop.slotName]" :placeholder="$t('8Wp0QjLURiCjZeAdHog')">
						<el-option v-for="item in controlLevels" :key="item.label" :label="item.label" :value="item.label" />
					</el-select>
				</template>
				<template #f_Risk_Assessment_L="scope">
					<el-input-number :disabled="disabled" style="width: 110px" :placeholder="$t('nyw7D5X0HpA9wiNKbmzq5')" :precision="0" v-model="scope.row[scope.prop.slotName]" :min="1" :max="9" />
				</template>
				<template #f_Risk_Assessment_E="scope">
					<el-input-number :disabled="disabled" style="width: 110px" :placeholder="$t('0T6U4XgCqIIsFLhBhk_4')" :precision="0" v-model="scope.row[scope.prop.slotName]" :min="1" :max="9" />
				</template>
				<template #f_Risk_Assessment_C="scope">
					<el-input-number :disabled="disabled" style="width: 110px" :placeholder="$t('8Rm6sizc6KJh5Y5WLhwR')" :precision="0" v-model="scope.row[scope.prop.slotName]" :min="1" :max="9" />
				</template>
				<template #f_Risk_Assessment_D="scope">
					{{ scope.row['f_Risk_Assessment_L'] * scope.row['f_Risk_Assessment_E'] * scope.row['f_Risk_Assessment_C'] }}
				</template>
				<template #danger_level="scope">
					<div style="font-size: 12px; text-align: center">
						{{
							scope.row['f_Risk_Assessment_L'] * scope.row['f_Risk_Assessment_E'] * scope.row['f_Risk_Assessment_C'] >= 320
								? $t('zxGaloajaAo1yMttcLeve5')
								: scope.row['f_Risk_Assessment_L'] * scope.row['f_Risk_Assessment_E'] * scope.row['f_Risk_Assessment_C'] >= 160
								? $t('zxGaloajaAo1yMttcLeve4')
								: scope.row['f_Risk_Assessment_L'] * scope.row['f_Risk_Assessment_E'] * scope.row['f_Risk_Assessment_C'] >= 70
								? $t('zxGaloajaAo1yMttcLeve3')
								: scope.row['f_Risk_Assessment_L'] * scope.row['f_Risk_Assessment_E'] * scope.row['f_Risk_Assessment_C'] >= 20
								? $t('zxGaloajaAo1yMttcLeve2')
								: $t('zxGaloajaAo1yMttcLeve1')
						}}
					</div>
				</template>
				<template #v_Remake="scope">
					<el-input :disabled="disabled" :precision="0" v-model="scope.row[scope.prop.slotName]" />
				</template>
				<template #operation="scope">
					<el-button
						icon="ele-Delete"
						@click="
							() => {
								deleteAction(scope);
							}
						"
						type="danger"
						size="small"
						text
					>
						{{ $t('mkwlMbm3qr88f0XxV9Pje') }}
					</el-button>
				</template>
			</v-table>
		</el-card>
	</div>
</template>
<script lang="ts">
	
</script>
<script setup lang="ts">
import { ref , getCurrentInstance, onBeforeMount , defineProps, reactive } from 'vue';
import requestTotal from '/@/api/common/common';
import vTable from '/@/components/table/v-table.vue';
import { ElMessageBox } from 'element-plus';
import { postDeleteDiscernDetail } from '/@/api/safety-play/discernAPI';
import eventBus from '/@/utils/eventBus';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
const deleteAction = (data: any) => {
	if (data.row.n_Id) {
		ElMessageBox.confirm($t('itYcbTIj20MmWuPdBMgvd'), $t('nHdM3UcfLoZbHyqgSa3cx'), {
			confirmButtonText: $t('cpmrq09Mw3tfVmwWGsZzb'),
			cancelButtonText: $t('wFa44E4Iz025Ha2gYeDop'),
			type: 'warning',
			center: true,
		})
			.then(async () => {
				await postDeleteDiscernDetail({
					n_Id: data.row.n_Id,
				});
				scope123.data.formData[scope123.data.item.key].splice(data.row.index, 1);
				eventBus.emit('loadData');
			})
			.catch(() => {});
	} else {
		scope123.data.formData[scope123.data.item.key].splice(data.row.index, 1);
	}
};

const options = ref([]);
const controlLevels = ref([
	{
		label: $t('aWbJxbEjHrjua35I6zvUu'),
	},
	{
		label: $t('otw1YatnIEsNXfdXHyXjU'),
	},
	{
		label: $t('fw8kxxpvMmFfhkk30aaH1'),
	},
]);

const addClick = () => {
	console.log('点击新增', scope123.data.item.key);
	// scope123.data.formData[scope123.data.item.key].push({
	// 	v_WorkExplain: '',
	// 	v_Shielding: '',
	// 	v_Advice_Shielding: '',
	// 	v_Control_Measures: '',
	// 	v_Control_Level: '',
	// 	f_Risk_Assessment_L: 1,
	// 	f_Risk_Assessment_E: 1,
	// 	f_Risk_Assessment_C: 1,
	// 	f_Risk_Assessment_D: '',
	// 	danger_level: '',
	// 	v_Remake: '',
	// 	n_Id: 0,
	// });
  //隐藏防护用品
  scope123.data.formData[scope123.data.item.key].push({
		v_WorkExplain: '',
		v_Control_Measures: '',
		v_Control_Level: '',
		f_Risk_Assessment_L: 1,
		f_Risk_Assessment_E: 1,
		f_Risk_Assessment_C: 1,
		f_Risk_Assessment_D: '',
		danger_level: '',
		v_Remake: '',
		n_Id: 0,
	});

};
//远程查询防护用品
const remoteMethodShield = (query: string) => {
	if (loading.value == false) {
		loading.value = true;
		loadShieldList(query, 1);
	}
};
const remoteMethodAdvice = (query: string) => {
	if (loading.value == false) {
		loading.value = true;
		loadShieldList(query, 2);
	}
};
const loading = ref(false);
// const loading = ref(false);

//loadShieldList
const loadShieldList = async (query: string, type: Number) => {
	const res = await requestTotal.GetShieldingList({
		V_ShieldingName: query,
		N_Type: type,
	});
	loading.value = false;
	options.value = res.data;
};

// const delClick = () => {
// 	console.log('点击删除');
// 	if (scope123.data.formData[scope123.data.item.key].length <= 1) {
// 		return;
// 	}
// 	scope123.data.formData[scope123.data.item.key].pop();
// };

const prop = defineProps({
	scope: {
		type: Object,
		default: () => ({}),
	},
	tableConfig: {
		type: Object,
		default: () => ({}),
	},
	//是否禁用
	disabled: {
		type: Boolean,
		default: false,
	},
});
const scope123 = reactive(prop.scope);
console.log(prop.scope);
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped lang="scss"></style>
